<template>
	<view class="order  xbs">
		<view class="top xflex-x-between ">
			<view class="xflex-x">
				<image class="xz" src="/static/image/mine/hi.png" mode=""></image>
				<view class="sn">
					嗨，有酒店抢单了
				</view>
			</view>
			<view class="xcf state">
				刷新
			</view>
		</view>

		<view class="xp24-32" style="padding-top: 0;">
			<view class="xflex-x-between xmt32">
				<view class="xflex-x">
					<image class="addicon" src="/static/image/mine/address.png" mode=""></image>
					<view class="addname">
						{{info.keyword}}
					</view>
					
					

				</view>
				<view class="xflex-x-center">
					<!-- <view class="addxg">
						修改订单
					</view>
					<image class="jt" src="/static/image/mine/jt.png" mode=""></image> -->
				</view>
			</view>


			<view class="xmt20">
				<view class="time">
					{{info.order_info.time}}<span class="xml32">{{info.order_info.night}}晚</span>
				</view>
				<view class="info ">
					{{info.order_info.house}}间 · {{info.order_info.adult}}成人 · {{info.order_info.children}}儿童
				</view>
			</view>


			<view class="he"></view>


			<view class="hote">
				<view class="hote-item xflex-x xpt24 xpb24" >
					<view class="hote-imgs pr xmr12">

						<image class="hote-img pa " :src="info.hotel.image" mode=""></image>
					<!-- 	<view class="hote-time pa">
							{{itm.seconds}}秒
						</view> -->

					</view>
					<view class="xflex1">
						<view class="hote-title">
							{{info.hotel.name}}
						</view>
						<view class="xmt12">
							<image v-for="(item,index) in info.hotel.star" :key="index" class="xing" src="/static/image/mine/xing.png" mode=""></image>
						</view>

						<view class="xflex-x xmt12">
							<view class="hote-span xmr10">
								{{info.hotel.score}}
							</view>
							<view class="hote-span xmr10" v-if="info.hotel.sales>0">
								{{info.hotel.sales>99?'99+':info.hotel.sales}}已消费
							</view>

						</view>

						<view class="xflex-x">
							<!-- <view class="hote-breakfast xflex-x" style="justify-content: flex-end;">
								<view class="hote-span1" v-for="(items,index) in info.hotel.label" :key="index">{{items}}
								</view>
						
							</view> -->
						</view>


						<view class="xflex-x-between">
							<view class="xflex-x">
								<image class="hote-address" src="../../..//static/image/mine/address.png" mode="">
								</image>
								<view class="hote-breakfast">
									{{info.distance}}
								</view>
							</view>
							<view class="hote-ads"  @click="pay('/pagesA/page/detail/published/published?id='+info.id)">
								查看酒店>
							</view>
						</view>
					</view>
				</view>
			</view>



			<view class="">
				<view class="xflex-x">
					<image class="icon" src="/static/image/mine/sj.png" mode=""></image>
					<view class="timew xmr24">
						订单待支付
					</view>
					
					<view class="timew">
						{{times}}
					</view>
					<view class="timew">
						后订单无法取消
					</view>
				</view>
				<view class="xflex-x-between xmt32">
					<view class="cancel" @click="cancel()">
						取消订单
					</view>
					<view class="publish" @click="pay('/pagesA/page/detail/published/published?id='+info.id)">
						￥{{info.total_amount}} 支付
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		hotelcancel,
		hotelpublish,
		hotelpay
	} from "/network/home.js"
	import {
		defineProps,
		defineEmits,
		onMounted,
		onUnmounted,
		ref,
		watchEffect
	} from 'vue'
	let props = defineProps(['info'])

	let emit = defineEmits('updata')
	
	const timerId = ref(null);
	let time = ref(0)
	let times = ref('00:00')
	function secondsToMinutes() {
	    let minutes = Math.floor(time.value / 60); // 分钟
	    let remainingSeconds = time.value % 60; // 剩余秒数
	    return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`; // 格式化输出
	}
	 
	const startTimers = () => {
		// 假设我们每秒钟更新一次数据  
		timerId.value = setInterval(() => {
			// 在这里执行你的代码  
			time.value = time.value - 1
			times.value = secondsToMinutes(time.value)
		}, 1000);
	};
	watchEffect(()=>{
		clearInterval(timerId.value);
		timerId.value = null;
		time.value = props.info.seconds
		startTimers()
	})
	
	
	
	// 在组件挂载时启动定时器
	onMounted(()=>{
		clearInterval(timerId.value);
		startTimers()
	});
	
	// 在组件卸载时清除定时器  
	onUnmounted(startTimers);

	const cancel = () => {
		hotelcancel({
			id: props.info.id
		}).then(res => {
			uni.showToast({
				icon:"none",
				title:"取消成功"
			})
			emit('updata')
		})
	}

	const pay = (url) => {
		uni.reLaunch({
			url:url
		})
		// hotelpay({
		// 	id: info.id
		// }).then(res => {
		// 	uni.requestPayment({
		// 		provider: 'wxpay', // 服务提提供商
		// 		timeStamp: res.data.timestamp, // 时间戳
		// 		nonceStr: res.data.noncestr, // 随机字符串
		// 		package: res.data.package,
		// 		signType: res.data.signtype, // 签名算法
		// 		paySign: res.data.sign, // 签名
		// 		success: function(res) {
		// 			console.log('支付成功', res);
		// 			// 业务逻辑。。。
		// 			emit('updata')
		// 		},
		// 		fail: function(err) {
		// 			console.log('支付失败', err);
		// 		}
		// 	});
		// })
	}
</script>

<style lang="scss" scoped>
	.order {
		background-color: #fff;
		border-radius: 20rpx;
	}

	.xz {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.top {
		padding: 24rpx 29rpx 30rpx;
		// box-sizing: border-box;
		background: linear-gradient(90deg, #0DBFFB, #198EFF);
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.sn {
		font-weight: bold;
		font-size: 30rpx;
		color: #fff;
	}

	.state {
		font-weight: 500;
		font-size: 24rpx;
		color: #fff;
		
		width: 80rpx;
		height: 36rpx;
		background: #F5F5F550;
		border-radius: 6rpx;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #F5F5F5;
		text-align: center;
		line-height: 36rpx;
	}

	.addicon {
		width: 28rpx;
		height: 28rpx;
		margin-right: 8rpx;
	}

	.jt {
		width: 24rpx;
		height: 24rpx;
		margin-left: 5rpx;
	}

	.addname {
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
	}

	.addxg {
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
	}

	.time {
		font-weight: 800;
		font-size: 36rpx;
		color: #222222;

	}

	.info {
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
		margin-top: 17rpx;
	}

	.star {

		background: #F8F8F8;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
	}

	.cancel {
		width: 174rpx;
		height: 88rpx;
		border-radius: 44rpx;
		border: 1px solid #CCCCCC;
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
		text-align: center;
		line-height: 88rpx;
	}

	.publish {
		width: 440rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #0DBFFB, #198EFF);
		border-radius: 44rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
	}

	.he {
		width: 660rpx;
		height: 10rpx;
		background: #F8F8F8;
		margin-top: 30rpx;
	}

	.hote {
		&-span1 {
			padding: 0 10rpx;
			position: relative;
		
			&::after {
				content: '';
				position: absolute;
				right: 0;
				top: 16rpx;
				display: block;
				width: 1rpx;
				height: 20rpx;
				background-color: #999;
			}
		&:last-child {
				&::after {
					width: 0;
					display: none;
				}
			}
		}
		&-title {
			// width: 157rpx;
			height: 31rpx;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			line-height: 38rpx;
		}

		&-img {
			width: 200rpx;
			height: 200rpx;
			background-color: #198EFF;
		}

		&-imgs {
			width: 200rpx;
			height: 200rpx;
			border-radius: 12rpx;
			overflow: hidden;
		}

		&-time {
			width: 180rpx;
			height: 40rpx;
			background: rgba(0, 0, 0, 0.4);
			border-radius: 10rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #FFFFFF;
			line-height: 40rpx;
			text-align: center;
			bottom: 8rpx;
			left: 10rpx;
		}

		&-span {

			font-family: PingFang SC;
			font-weight: 500;
			font-size: 18rpx;
			color: #999999;
			background: #EEEEEE;
			border-radius: 6rpx;
			padding: 7rpx 13rpx;
		}

		&-breakfast {
			width: 100%;
			text-align: right;

			font-family: PingFang SC;
			font-weight: 400;
			font-size: 20rpx;
			color: #999999;
			line-height: 48rpx;
		}

		&-address {
			width: 28rpx;
			height: 28rpx;
		}

		&-ads {

			font-weight: 500;
			font-size: 24rpx;
			color: #198FFF;
		}
	}
	
	.xing {
		width: 28rpx;
		height: 28rpx;
		margin-right: 10rpx;
	}
	
	.icon {
		width: 25rpx;
		height: 25rpx;
	}
	.timew {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #198FFF;
	}
</style>